<template>
  <div id="ContactUs">
    <div class="banner container-fuild text-center">留言板</div>
    <div class="container">
      <div class="container-fuild ContactUs-container">
        <div class="row" >
          <el-input style="width: 300px" placeholder="请输入姓名" v-model="name" clearable></el-input>
          <el-button type="primary" @click="search" style="margin-left: 5px">查询</el-button>
          <br/>
          <br/>
          <el-button type="success" @click="handleAdd">新增留言</el-button>
          <br/>
          <br/>
          <div>
            <el-table :data="tableData" border>
              <el-table-column prop="name" label="姓名" width="100" />
              <el-table-column prop="content" label="留言内容"  />
              <el-table-column  label="操作" width="160">
                <template #default="scope">
                  <el-button  type="danger" size="small" @click="handleRowDel(scope.$index)">
                    删除
                  </el-button>
                  <el-button  type="warning" size="small"  @click="handleEdit(scope.row,scope.$index)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogFormVisible" title="信息" width="40%">
      <el-form :model="form" label-width="100px" style="padding-right: 30px">
        <el-form-item label="姓名" label-width="100">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="form.content" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="ContactUs">
import WOW from 'wow.js'
import {reactive, ref} from 'vue'
const name = ref('')   //如果要对name进行改变的话必须用ref进行包装  ref是包装简单类型的，reactive是包装数组或者对象的
const search = () => {
  tableData.value = tableData.value.filter(v => v.name.includes(name.value))
}
//新增数据，设置新的空的绑值对象  打开弹窗
const handleAdd = () => {
  form = reactive({})
  dialogFormVisible.value = true//打开弹窗
}

const tableData = ref([
  {
    id:1,
    name: '张三',
    content: '西藏绝美',
  },
  {
    id:2,
    name: '李四',
    content: '总要去趟西藏吧',
  },
  {
    id:3,
    name: '王五',
    content: '西藏是一片干净的净土',
  },
  
])
const handleRowDel = (index) => {
  //删除数据
  tableData.value.splice(index,1)
}

let form = reactive({})
const globalIndex = ref(-1)//全局保存的编辑的行号
const dialogFormVisible = ref(false)

//编辑数据，先赋值数据到表单，再打开弹窗
const handleEdit = (row, index) => {
  const newObj = Object.assign({}, row)
  form = reactive(newObj)
  globalIndex.value = index //把当前编辑的行号赋值给 全局保存的编辑的行号
  dialogFormVisible.value = true
}
//保存数据，将数据插入到tableData里面，并刷新页面数据，让弹窗关闭
const save = () => {
  if (globalIndex.value >= 0) {//表示编辑
    tableData.value[globalIndex.value] = form
    console.log(form)
    globalIndex.value = -1 //还原回去
  } else {//新增
    tableData.value.push(form)
  }
  form = {}
  dialogFormVisible.value = false
}
</script>

<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url('../assets/img/banner_1.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.ContactUs-container {
  padding: 80px 0;
  transition: all ease 0.5s;
  box-sizing: border-box;
}
#map {
  width: 100%;
  height: 365px;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
@media screen and (max-width: 997px) {
  .ContactUs-container {
    padding: 20px 0;
  }
}
</style>

